import React from 'react'
import { Button, Form, Select } from 'antd'
import { FilterContainer } from '@/appComponents/Filter'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'

const Filter = ({ onQuery, timeList, setHistoryId, onDownLoadExecl }) => {
  const click = () => {
    onQuery()
  }
  return (
    <FilterContainer>
      <Form layout="inline">
        <Form.Item>
          <Select
            style={{
              width: 300,
              height: 35
            }}
            mode="multiple"
            maxTagCount="responsive"
            onChange={(e) => {
              if (e.length) {
                setHistoryId(e.join(','))
              } else {
                setHistoryId(null)
              }
            }}
          >
            {timeList.length &&
              timeList.map((i) => {
                return (
                  <Select.Option key={i.history_id} value={i.history_id}>
                    {dayjs(i.start_time).format('YYYY-MM-DD HH') +
                      ' -- ' +
                      dayjs(i.end_time).format('YYYY-MM-DD HH')}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item style={{ width: 80 }}>
          <Button
            type="primary"
            onClick={() => click('query')}
            icon={<SearchOutlined />}
          >
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            icon={<DownloadOutlined />}
            type="primary"
            onClick={() => {
              onDownLoadExecl()
            }}
          >
            导出
          </Button>
        </Form.Item>
      </Form>
    </FilterContainer>
  )
}

export default Filter
